<template>
   <div class="city-item" @click="onCityClick(cityInfo)" >
       <span class="coty" >{{cityInfo.cityName}}</span>
   </div>
</template>

<script>
import { mapMutations } from "vuex";

export default {
    name: 'CityListSub',
    props: {
        cityInfo: Object
    },
     methods: {
        ...mapMutations(['selectCity']),
        onCityClick (cityInfo) {
            this.selectCity(cityInfo);
            this.$router.push('/');
        }
    }
  
}
</script>

<style lang="scss" scoped>
  @import '~styles/mixins.scss';
  @import '~styles/variables.scss';

  .city-item {
      @include flex-row;
      align-items: center;
      height: .5rem;
      width: 100%;
      padding-left: .15rem;
      background-color: #fff;
      border-bottom: 1px solid #ddd;
      font-size: .16rem;
  }


</style>